<template>
    <div>
        <el-form v-if="data.detail.completed === false" :model="mdl" class="demo-form-inline" label-width="80px">
            <el-form-item :label="$i18n.t('APPROVE_RESULT')">
                <el-radio-group v-model="mdl.status">
                    <el-radio v-for="(item, index) in statusList" :label="item.value" :key="index">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="mdl.status === 1" :label="$i18n.t('REJECT_REASON')">
                <el-checkbox-group v-model="mdl.reject_reason">
                    <fieldset class="fieldSet" v-for="(item, index) in rejectReasonList" :key="index">
                        <legend class="legend">{{ item.title }}</legend>
                        <el-checkbox :label="key" v-for="(item1, key) in item.items" :key="key">{{ item1 }}</el-checkbox>
                    </fieldset>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('REMARK')">
                <el-input type="textarea" v-model="mdl.remark" :rows="4" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('REMARK') })"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" :loading="btnLoading" :disabled="mdl.status === null">{{ $i18n.t('SAVE') }}</el-button>
            </el-form-item>
        </el-form>
        <form-content v-else :data="data.result"></form-content>
    </div>
</template>

<script>
    import { getApproveDetail, handleApproveTask } from '@/api/approve'
    import FormContent from '@/components/FormContent'

    export default {
        name: 'ApproveResult',
        components: { FormContent },
        watch: {
            query () {
                this.loading = true
                const { id } = this.query
                getApproveDetail(id, { method: 'ApproveResult' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                mdl: {
                    status: null,
                    reject_reason: [],
                    remark: ''
                },
                data: {
                    detail: {},
                    result: []
                },
                btnLoading: false,
                query: {}
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        },
        computed: {
            statusList () {
                return this.$store.getters.options.ApproveResultStatusList
            },
            rejectReasonList () {
                return this.$store.getters.options.ApproveRejectReasonList
            }
        },
        methods: {
            onSubmit () {
                this.btnLoading = true
                const { id } = this.query
                handleApproveTask(id, { method: 'FollowResult', ...this.mdl }).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                }).finally(() => {
                    this.query = {}
                    this.btnLoading = false
                    this.query = this.$route.query
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .fieldSet {
        font-size: 14px;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid #dddee1;
        margin: 0 2px;
        padding: .35em 1.8em .75em;
        .legend {
            padding: 0 .8rem;
        }
    }
    /deep/ .el-checkbox__label {
        font-size: 12px;
    }
</style>
